<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>常用选择器的写法</title>
    <style type="text/css">
        /*元素选择器:通过元素名称来筛选标签元素.*/
        p{
            color:red;
            /*修改字体*/
            font-size: 30px;
            /*修改字体*/
            font-family: '楷体';
            /*修改字体样式*/
            font-style: italic;
            /*加粗效果*/
            font-weight: bolder;
        }

        /*id选择器,通过id来筛选标签元素,格式:"#id值"*/
        #p1{
            color: blue;
        }

        /*类选择器,使用class来筛选标签元素.格式:".class值"*/
        .p2{
            color: green;
        }

        /*通过属性名和属性值来筛选标签元素,格式:元素名[属性名='属性值']*/
        p[title='p3']{
            color: orange;
        }

        /*筛选直接子元素*/
        p > strong{
            color: purple;
        }

        /*筛选所有的后代元素*/
        p span{
            color: pink;
        }

    </style>
</head>
<body>
    <p>元素选择器</p>

    <!-- 设置id属性,id属性一般是唯一的,代表唯一来标识和区别该元素 -->
    <p id="p1">id选择器</p>

    <!-- 设置class属性,class用来定义某一类元素 -->
    <p class="p2">class类选择器</p>

    <!-- 设置属性,(可以是自定义属性) -->
    <p title="p3">属性选择器</p>

    <p>这是一个<strong>strong p标签</strong></p>
<span></span>
    <p>
    这是另一个p标签
        <span>
            呵呵
            <span>
                吼吼
            </span>
        </span>
        <span>
            嘿嘿
        </span>
    </p>
</body>
</html>